<template>
  <div>
    <!-- 使用组件 -->
    <!-- 使用自定义属性  属性名="属性值" 或者 :属性名="vue变量" -->
    <my-product
      title="非常好吃的口水鸡"
      :price="price + '元'"
      :info="info"
    ></my-product>
    <chicken
      v-for="item in list"
      :key="item.id"
      :name="item.name"
      :price="item.price"
    ></chicken>
  </div>
</template>

<script>
import Chicken from "./components/Chicken.vue";
// 引入组件
import MyProduct from "./components/MyProduct.vue";
export default {
  // 注册组件
  components: { MyProduct, Chicken },
  data() {
    return {
      price: 35,
      info: "鲜嫩可口, 酸辣弹牙",
      list: [
        { id: 1, name: "烤鸡腿", price: 5 },
        { id: 2, name: "牛肉煲", price: 12 },
        { id: 3, name: "板烧堡", price: 8 },
      ],
    };
  },
  methods: {},
};
</script>

<style>
</style>